// 1. 生成一个随机的数字
// Math.random() 返回 [0, 1) 之间的随机数
// 我们需要 [0, 100) 之间的数
// 向下取整(Math.random() * 100)
var toGuess = parseInt(Math.random() * 100)     // [0, 100) 之间的数字
console.debug("目标值: " + toGuess)

// 2. 典型的事件驱动
// 2.1 用户点击 "猜" 按钮时执行

// 2.2 事件源
var oButton = document.querySelector('button#guess')

// 2.3 事件处理逻辑
var oInput = document.querySelector('input')
var oCountSpan = document.querySelector('#count')
var oResultSpan = document.querySelector('#result')
var oHistory = document.querySelector('#history')

var count = 0       // 记录猜的次数，生命周期是会经历多次 handle 函数的调用的，所以不能放在 handle 里
function handle() {
    // 3. 进行 "猜" 的逻辑:
    // 3.1 先得到用户的输入
    var guess = oInput.value    // 目前得到的类型是字符串
    oInput.value = ''

    if (isNaN(guess)) {
        alert('必须输入数字')
        return
    }

    guess = parseInt(guess)     // 字符串类型 -> 整型
    console.log("用户输入: " + guess)

    // 3.2 判断用户输入和要猜的数字之间的关系，得到结果
    count += 1  // 更新已经猜的次数

    var html = `<div>第 ${count} 次：${guess}</div>`
    oHistory.innerHTML += html

    var result
    if (guess === toGuess) {
        result = "猜对了"

        // 停用掉 输入框 和 按钮
        oInput.disabled = true
        oButton.disabled = true
    } else if (guess < toGuess) {
        result = "猜小了"
    } else {
        result = "猜大了"
    }
    // 3.3 更新显示内容：已经猜的次数、结果
    oCountSpan.textContent = count

    oResultSpan.textContent = result
}

// 2.4 事件(click) 进行绑定
oButton.addEventListener('click', handle)   // 约等于 oButton.onclick = handle

oInput.addEventListener('keydown', function (event) {
    // 传入的参数的事件对象
    // console.log(event)
    // 只处理 回车 按钮
    if (event.key === 'Enter') {
        handle()
    }
})


// 语法上的特性：
// 链式调用 document.querySelector('button#reset') 的返回值没有赋值给变量，而是直接拿来继续调用方法
// 匿名函数 function() { ... }
document.querySelector('button#reset').addEventListener('click', function() {
    // 重新生成随机值
    toGuess = parseInt(Math.random() * 100)     // [0, 100) 之间的数字
    console.debug("目标值: " + toGuess)

    // 复原输入框和按钮
    oInput.disabled = false
    oInput.value = ''
    oButton.disabled = false

    // 猜的次数复原
    count = 0

    // 显示结果和次数复原
    oCountSpan.textContent = ''
    oResultSpan.textContent = ''

    oHistory.innerHTML = ''
})